twd: mobile support

August 21 2025

ughhhhhhhhhhhhhhhhhh fine yeah we need basic mobile support

Welcome back to The Webmaster Diaries. Honestly I've made no progress on the website generator front, I've been trying to just get the website formatted in a way that I can count on it not breaking in most situations. I have somehow managed to accumulate tech debt on my own website, which is kind of amazing to me since the tech debt boils down to styling my elements better and not with 5000 different special cases. What a headache.

This past week I focused on getting the bar working, I ended up getting distracted here and there fixing the tech debt like I was mentioning, understanding the relationships between different sub classes and how they override original properties. W3 has a great tutorial on how to make a responsive bar, it unfortunately relies on using *shudders* JavaScript to update object styles to make it expand out when in mobile mode. This is kind of a shame, but I figured at some point it needed to happen. Admittedly my journey to implement the responsive bar was less than ideal, and frankly I got way too upset way too early on.

As I mentioned earlier, I despise web dev. Things don't make sense, the number of frameworks present is a doozy, and overall it just wasn't appealing to me compared to anything that might be integrated instead. Trying to make sense of the CSS needed for the navbar made my head spin, why were there only a few list elements, why were there 20 different styles for the same 6 elements, how did the other buttons in the nav bar get hidden when the screen got small enough? I couldn't make sense of it and it made me irrationally angry. Another reason I'm going on this adventure is to really tone my ego, one of the hardest pills I'm currently trying to swallow is I don't know nearly enough about general SWE to really survive; and I've gotten far too comfortable with the very little I do know. After a bit of calming down I did the one thing any reasonable person should do, sit still and just read line by line to try and understand. In just 5 minutes of readjusting myself I figured out that elements not in the first child of the list were being hidden, certain styles were only applied given a certain pixel width available in the screenspace, and the JS was responsible for changing the classes of the navbar from regular navbar to a dropdown list styling. Super straightforward, I just needed to give myself the time and the chance to try and understand.

This is where cleaning up my tech debt began, trying to jam this CSS into the barebones skeleton wasn't gonna work, and I also had to try and condense the amount of HTML I was using. My navbar was consisting of two lists, one for the right side and one for important links on the left. I was able to clean up and have just one list, floating left on specific elements. Way cleaner. I also used the built in CSS grid container from barebones that was already responsive, rather than trying to style my own, and it made all my blog entries as well as any relevant elements mobile ready instantly. Cleaning up the old centering technique wasn't bad, but I definitely have a long way to go in terms of learning the basics. LLM's have been helpful here and there, but I've found that I'm not quite good enough at describing problems to them yet and usually solve issues faster than I can trying to beg a chatbot for the right answer.

That's all the major progress I have to report for now. I'm really glad to be learning again, even if it's basic stuff that any beginner should be able to pick up. One of my biggest personal struggles after starting work was finding time to take up any sort of hobby again, and with this website I've been able to semi-consistently dedicate time. It's a nice outlet. For the next entry of TWD, I plan on finalizing mobile support/how I want to organize the website (things like a read more button, a billwurtz style indexing of every blog post regardless of category), and once I'm fully settled in I'll begin drafting up the concepts of a plan for a static site generator. Some bolder things I might attempt to do are make the website even faster by removing the Google fonts CDN dependency, and add this fancy bloom-filter based search program which happened to be exactly the type of text searching solution I was looking for.